<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<div id="roleContainer" class="page-box">
    <el-row>
        <el-col :md="17">
            <el-row class="qry-box">
               <el-form :inline="true" :model="qryForm" onsubmit="return false">
			      <el-form-item>
			          <el-button type="text" icon="plus" @click="openAddPage(1,$event)">新增</el-button>
			      </el-form-item>
				  <el-form-item label="角色名称：">
				    <el-input v-model="qryForm.name" placeholder="请输入角色名称"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" icon="search" @click="qry" :loading="loading">查询</el-button>
				  </el-form-item>
				</el-form>
            </el-row>
            <el-row class="table-box">
	            <el-table ref="roleTable" :data="tableData"  border="true" stripe="true"  style="width: 100%" :height="tableHeight" 
	             :loading="loading" :element-loading-text="loadingTxt" highlight-current-row="true" @current-change="tableSelectChange">
				    <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
				    <el-table-column prop="remark" label="备注" min-width="260"></el-table-column>
				    <el-table-column label="操作" min-width="180">
				        <template scope="scope">
					        <el-button type="primary" icon="edit" size="small" @click="openAddPage(2,$event)" :roleId="scope.row.id" >修改</el-button>
					        <el-button type="warning" icon="delete" size="small" @click="del"  :roleId="scope.row.id">删除</el-button>
				        </template>
				    </el-table-column>
				  </el-table>
		   </el-row>
		   <el-row class="pagination-box">
				<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 :current-page="currentPage" :page-size="pageSize" :total="totalCount" layout="total,prev, pager, next">
			    </el-pagination>
			</el-row>
        </el-col>
        <el-col :md="6" :offset="1">
            <el-row class="qry-box">
                <el-button type="success" @click="updateRoleResource">修改权限</el-button>
            </el-row>
            <el-row class="table-box">
	            <el-tree ref="resourceTree" :data="treeData" :props="treeProps"   show-checkbox="false" :default-expand-all="true"
	            node-key="id" style="width: 100%;" :style="treeStyle"></el-tree>
            </el-row>
        </el-col>
    </el-row>
    <jsp:include page="addRole.jsp"></jsp:include>
</div>
<script type="text/javascript" src="${ctx }/static/sys/admin/role/roleList.js"></script>